<template>
  <div ref="container" class="container" id="container"></div>
</template>

<script>
import * as THREE from 'three'
import {OBJLoader, MTLLoader} from 'three-obj-mtl-loader'
const OrbitControls = require('three-orbit-controls')(THREE)

export default {
  name: 'vue-three',
  data() {
    return {
      scene: '',
      camera: '',
      renderer: '',
      windowHalfX: 0,
      windowHalfY: 0,
      mouseX: 0,
      mouseY: 0,
      controls: undefined
    }
  },
  methods: {
    //初始化three.js相关内容
    init() {
      const container = this.$refs.container

      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 3000)
      this.camera.position.z = 1100

      // scene

      this.scene = new THREE.Scene()

      const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4)
      this.scene.add(ambientLight)

      const pointLight = new THREE.PointLight(0xffffff, 0.8)
      this.camera.add(pointLight)
      this.scene.add(this.camera)

      // model

      const onProgress = function (xhr) {
        if (xhr.lengthComputable) {
          const percentComplete = (xhr.loaded / xhr.total) * 100
          console.log(Math.round(percentComplete, 2) + '% downloaded')
        }
      }

      const onError = function () {}

      const manager = new THREE.LoadingManager()

      // comment in the following line and import TGALoader if your asset uses TGA textures
      // manager.addHandler( /\.tga$/i, new TGALoader() );
      new MTLLoader(manager).setPath(this.filePathPrefix + '/profile/models/plane1/').load('obj.mtl', materials => {
        materials.preload()
        Object.values(materials.materials)[0].color.set(0xffffff)
        new OBJLoader(manager)
          .setMaterials(materials)
          .setPath(this.filePathPrefix + '/profile/models/plane1/')
          .load(
            'obj.obj',
            object => {
              object.position.y = -95
              this.scene.add(object)
            },
            onProgress,
            onError
          )
      })
      THREE.Loader.Handlers.get('/profile/models/plane1/')

      //

      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setPixelRatio(window.devicePixelRatio)
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      container.appendChild(this.renderer.domElement)
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      this.controls.update()

      // document.addEventListener('mousemove', this.onDocumentMouseMove)

      //

      window.addEventListener('resize', this.onWindowResize)
    },
    //窗口监听函数
    onWindowResize() {
      this.windowHalfX = window.innerWidth / 2
      this.windowHalfY = window.innerHeight / 2

      this.camera.aspect = window.innerWidth / window.innerHeight
      this.camera.updateProjectionMatrix()

      this.renderer.setSize(window.innerWidth, window.innerHeight)
    },
    animate() {
      requestAnimationFrame(this.animate)
      this.controls.update()
      this.render()
    },
    render() {
      this.renderer.render(this.scene, this.camera)
    }
  },
  mounted() {
    this.init()
    this.animate()
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
}
</style>
